﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>设置</title>

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/base.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/nav.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/mask.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/editProfile.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/setting.css">
</head>
<body>
<jsp:include page="../common/nav.jsp"/>
<div class="main" style="width:960px;margin:0 auto;">
    <div class="edit-header"><span></span>&nbsp;编辑信息</div>
    <form action="javascript:updateProfile();" method="post">
        <div class="edit-title">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="hidden" name="id" value="${user.id}">
            用户名：<input type="text" name="name" value="${user.name}">
        </div>
        <div style="padding-bottom: 10px">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            性别：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" value="1" name="sex">&nbsp;&nbsp;&nbsp;&nbsp;男
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" value="0" name="sex">&nbsp;&nbsp;&nbsp;&nbsp;女
        </div>
        <div class="edit-title">
            一句话介绍：<input type="text" name="simDesc" value="${user.simDesc}">
        </div>
        <div class="edit-title">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            居住地：<input type="text" name="address" value="${user.address}">
        </div>
        <div class="edit-title">
            &nbsp;&nbsp;&nbsp;
            职业经历：<input type="text" name="career" value="${user.career}">
        </div>
        <div class="edit-title">
            &nbsp;&nbsp;&nbsp;
            教育背景：<input type="text" name="education" value="${user.education}">
        </div>
        <div class="edit-title">
            &nbsp;&nbsp;&nbsp;
            个人简介：<input type="text" name="fullDesc" value="${user.fullDesc}">
        </div>
        <div class="relative">
            <button type="submit" class="edit-submit">完成修改</button>
        </div>
    </form>

    <div style="margin-top: 60px;"></div>
    <div class="edit-header"><span></span>&nbsp;修改密码</div>
    <form action="javascript:changePsw();" method="post">
        <div class="edit-title">
            <div class="text-danger"></div>
            原密码：<input type="password" name="password">
        </div>
        <div class="edit-title">
            新密码：<input type="password" name="newpassword">
        </div>
        <div class="edit-title">
            确认密码：<input type="password" name="newpassword2">
        </div>
        <div class="relative">
            <button type="submit" class="edit-submit">确认修改</button>
        </div>
    </form>

    <div style="margin-top: 60px;"></div>
    <div class="edit-header"><span></span>&nbsp;更换头像</div>
    <form action="javascript:changeAvatar();" method="post" enctype="multipart/form-data">
        <div class="edit-title">
            <span class="text-danger"></span>
            <input type="file" id="file" name="file" accept="image/*">
        </div>
        <div class="relative">
            <input type="hidden" name="userId" value="${user.id}">
            <button type="submit" class="edit-submit">确认更新</button>
        </div>
    </form>

</div>
<jsp:include page="../common/mask.jsp"/>
</body>

<script src="${pageContext.request.contextPath}/js/jquery-2.1.4.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.cookie.js"></script>
<script>
    $(function () {
        $("input[name='sex']").each(function () {
            if ($(this).val() === '${user.sex}'){
                $(this).attr("checked","true");
            }
        })
    })

    //更改个人资料
    function updateProfile() {
        var id = $("input[name='id']").val();
        var name = $("input[name='name']").val();
        var sex = $("input[name='sex']").val();
        var simDesc = $("input[name='simDesc']").val();
        var address = $("input[name='address']").val();
        var career = $("input[name='career']").val();
        var education = $("input[name='education']").val();
        var fullDesc = $("input[name='fullDesc']").val();
        $.ajax("${pageContext.request.contextPath}/user/updateProfile", {
            data: {
                id: id,
                name: name,
                sex: sex,
                simDesc: simDesc,
                address: address,
                career: career,
                education: education,
                fullDesc: fullDesc
            },
            success: function () {
                //更新cookie
                $.cookie('name', name, { expires: 30, path:'/' });
                $.cookie('sim_desc', simDesc, { expires: 30, path:'/' });
                alert("修改成功");
                window.location.reload();
            }
        })
    }

    //修改密码
    function changePsw() {
        var id = $("input[name='id']").val();
        var oldPsw = $("input[name='password']").val();
        var newpassword = $("input[name='newpassword']").val();
        var newpassword2 = $("input[name='newpassword2']").val();
        if (newpassword !== newpassword2){
            alert("两次密码不一致！！");
            return;
        }
        $.ajax("${pageContext.request.contextPath}/user/changePsw", {
            data: {
                id: id,
                oldPsw:oldPsw,
                newPsw:newpassword
            },
            success: function (response) {
                alert(response.message);
                oldPsw.val("");
                newpassword.val("");
                newpassword2.val("");
            }
        })
    }

    //更改头像
    function changeAvatar() {
        var id = $("input[name='id']").val();
        var file = document.getElementById("file").files[0];
        if (file == null){
            alert("点击选择文件上传头像");
            return;
        }
        var data = new FormData();
        data.append("userId",id);
        data.append("file",file);
        $.ajax("${pageContext.request.contextPath}/user/changeAvatarAjax",{
            data:data,
            contentType:false,
            processData:false,
            type:"post",
            success: function (response) {
                if (response.state === 1) {
                    alert(response.message);
                    $.cookie('avatar_url', response.data, { expires: 30, path:'/' });
                    window.location.reload();
                }else {
                    alert(response.message);
                    window.location.reload();
                }

            }
        })
    }

</script>
</html>

